<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title data-l10n-id="zotcard-card-manager"></title>
	<script src="chrome://zotero/content/include.js"></script>
	<link rel="localization" href="zotcard.ftl" />
	<link rel="localization" href="card-manager.ftl" />
	<link rel="stylesheet" href="../modules/common.css" />
	<link rel="stylesheet" href="../modules/element-plus.css" />
	<script src="../modules/vue.global.prod.js"></script>
	<script src="../modules/element-plus.js"></script>
	<script src="../modules/element-plus-zh-cn.js"></script>
	<script src="../modules/element-plus-en.js"></script>
	<script src="../modules/element-plus-zh-tw.js"></script>
	<script src="../modules/element-plus-icons.js"></script>
	<script src="../modules/zot-render-element-plus.js"></script>
	<script id="jsfile"></script>
	<script>
		document.getElementById('jsfile').src = window.Zotero ? "card-manager.js" : "card-manager-dev.js"
	</script>
	<style>
		body {
			padding: 0;
			margin: 0;
		}

		.header {
			height: 40px;
			background-color: #F6F6F6;
			display: flex;
			align-items: center;
			padding: 0 10px;
			justify-content: space-between;
		}

		.header .el-divider--vertical {
			border-left: 1px #c4d6ff var(--el-border-style) !important;
		}

		.title {
			margin-top: 0;
			margin-bottom: 0;
			flex: 1;
		}

		.main {
			padding: 10px 10px 50px 10px;
			width: calc(100% - 20px);
		}

		.card-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.card-header .el-icon {
			font-size: 18px;
		}

		.card-tools {
			padding: 5px 0 !important;
		}

		.card-footer {
			border-top: 1px solid var(--el-card-border-color);
			padding: var(--el-card-padding) 0 !important;
		}

		.card-footer .row {
			display: flex;
			align-items: center;
		}

		.label {
			min-width: 50pt;
			text-align: right;
			color: var(--el-text-color-placeholder) !important;
			margin-right: 10px;
		}

		.value {
			display: inline-block;
			word-wrap: break-word;
			word-break: break-all;
			overflow: hidden;
			color: var(--el-text-color-secondary) !important;
		}
		
		.value .el-link {
			color: var(--el-text-color-secondary) !important;
			font-size: unset !important;
			
		}

		.card1__item {
			width: 100%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.card2__item {
			width: 50%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.card3__item {
			width: 33.3%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.card4__item {
			width: 25%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.card5__item {
			width: 20%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.card6__item {
			width: 16.6%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.card7__item {
			width: 14.2%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.card8__item {
			width: 12.5%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.card9__item {
			width: 11.1%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.card10__item {
			width: 10%;
			padding-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.el-card {
			margin-bottom: 15px !important;
			margin-right: 15px !important;
			--el-card-padding: 10px !important;
		}

		.card-info {
			padding-bottom: var(--el-card-padding)!important;
		}

		.card-info .row {
			display: flex;
			padding: var(--el-card-padding) 0 !important;
			align-items: center;
		}

		.el-card__header {
			padding: var(--el-card-padding) !important;
		}

		.el-card__body {
			padding: var(--el-card-padding) !important;
		}

		.el-divider--vertical {
			margin: 0 !important;
		}

		.el-card.is-selected {
			border: 1px solid var(--el-color-primary);
		}

		.el-card.is-hide {
			background-color: #f9f9f9;
		}
		.el-carousel__container {
			height: 100%;
		}
		.el-carousel .el-carousel--horizontal {
			height: 100%;
		}
		.filter {
			padding-right: 45px;
		}
		.cascader-popper {
			height: 500px;
		}
		.cascader-popper .el-cascader-panel,.el-cascader-menu__wrap.el-scrollbar__wrap {
			height: 100%;
		}
		.el-cascader-menu {
			max-width: 300px;
		}
		.more {
			height: 80px;
			font-size: 11px;
		}
		.help {
			font-size: 12px;
		}
		.nodata {
			font-size: 12px;
			color: var(--el-text-color-placeholder) !important;
		}
	</style>
</head>

<body>
	<div id="app">
		<!-- header -->
		<el-affix :offset="0">
			<div class="header">
				<el-space wrap>
					<el-badge is-dot class="item">
						<el-link :underline="false" @click="handleTools('menu')" data-l10n-id="zotcard-card-manager-toolbar-menu-title">
							<el-icon><Expand></Expand></el-icon>
						</el-link>
					</el-badge>
					<el-divider direction="vertical"></el-divider>
					<el-link :underline="false"
						@click="handleTools('refresh')" data-l10n-id="zotcard-card-manager-toolbar-refresh-title"><el-icon><Refresh /></el-icon></el-link>
					<el-link :disabled="total === 0" :underline="false"
						@click="handleTools('edit')" data-l10n-id="zotcard-card-manager-toolbar-edit-title"><el-icon><Edit-Pen /></el-icon></el-link>
						<el-link :disabled="total === 0" :underline="false"
							@click="handleTools('replace')" data-l10n-id="zotcard-card-manager-toolbar-replace-title"><el-icon><Files /></el-icon></el-link>
					<el-link :disabled="total === 0" :underline="false" @click="handleTools('delete')" data-l10n-id="zotcard-card-manager-toolbar-delete-title"><el-icon>
							<Delete />
						</el-icon></el-link>
					<el-dropdown :disabled="total === 0">
						<el-icon><Document-Copy /></el-icon>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="handleTools('copy-content')"><span data-l10n-id="zotcard-card-manager-toolbar-copy-content">复制内容1</span></el-dropdown-item>
								<el-dropdown-item @click="handleTools('copy-text')"><span data-l10n-id="zotcard-card-manager-toolbar-copy-text">复制文本1</span></el-dropdown-item>
								<el-dropdown-item @click="handleTools('copy-markdown')"><span data-l10n-id="zotcard-card-manager-toolbar-copy-markdown">复制Markdown1</span></el-dropdown-item>
								<el-dropdown-item @click="handleTools('copy-html')"><span data-l10n-id="zotcard-card-manager-toolbar-copy-html">复制源代码1</span></el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<!-- <el-divider direction="vertical"></el-divider>
					<el-link :underline="false" @click="handleTools('top')">
						<el-icon>
							<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
								xmlns="http://www.w3.org/2000/svg">
								<path
									d="M2.5 2H13.5C13.646 2 13.7658 2.04683 13.8595 2.1405C13.9532 2.23417 14 2.354 14 2.5C14 2.646 13.9532 2.76583 13.8595 2.8595C13.7658 2.95317 13.646 3 13.5 3H2.5C2.354 3 2.23417 2.95317 2.1405 2.8595C2.04683 2.76583 2 2.646 2 2.5C2 2.354 2.04683 2.23417 2.1405 2.1405C2.23417 2.04683 2.354 2 2.5 2ZM8.5 6.969V14.0005H7.5V6.86L3.703 10.657L3 9.954L7.953 5.001L12.906 9.954L12.187 10.657L8.5 6.969Z"
									fill="#303133" />
							</svg>
						</el-icon>
					</el-link>
					<el-link :underline="false" @click="handleTools('up')"><el-icon>
							<Top></Top>
						</el-icon></el-link>
					<el-link :underline="false" @click="handleTools('down')"><el-icon>
							<Bottom></Bottom>
						</el-icon></el-link>
					<el-link :underline="false" @click="handleTools('bottom')"><el-icon>
							<Download></Download>
						</el-icon></el-link> -->
					<el-divider direction="vertical"></el-divider>
					<el-link :disabled="total === 0" :underline="false" @click="handleTools('selectedall')" data-l10n-id="zotcard-card-manager-toolbar-selectedall-title"><el-icon>
						<Circle-Check-Filled></Circle-Check-Filled>
					</el-icon></el-link>
					<el-link :disabled="total == 0" :underline="false" @click="handleTools('unselectedall')" data-l10n-id="zotcard-card-manager-toolbar-unselectedall-title"><el-icon>
						<Circle-Check></Circle-Check>
					</el-icon></el-link>
					<el-link :disabled="total === 0" :underline="false" icon="View" @click="handleTools('view')" data-l10n-id="zotcard-card-manager-toolbar-view-title"></el-link>
					<el-link :disabled="total === 0" :underline="false" @click="handleTools('hide')" data-l10n-id="zotcard-card-manager-toolbar-hide-title"><el-icon>
						<Hide></Hide>
					</el-icon></el-link>
					<el-link :disabled="total === 0" v-if="moreLoadeds === cards.length" :underline="false" @click="handleTools('collapse')" data-l10n-id="zotcard-card-manager-toolbar-collapse-title"><el-icon>
						<Caret-Top></Caret-Top>
					</el-icon></el-link>
					<el-link :disabled="total === 0" :underline="false" @click="handleTools('expand')" data-l10n-id="zotcard-card-manager-toolbar-expand-title"><el-icon>
						<Caret-Bottom></Caret-Bottom>
					</el-icon></el-link>
					<el-divider direction="vertical"></el-divider>
					<el-link :disabled="total === 0" :underline="false" @click="handleTools('print')" data-l10n-id="zotcard-card-manager-toolbar-print-title"><el-icon>
							<Printer></Printer>
						</el-icon></el-link>
					<el-divider direction="vertical"></el-divider>
					<el-popover :width="450" :visible="renders.cardViewerPopover.visible" trigger="click" placement="bottom">
						<template #reference>
							<el-link :disabled="total === 0" :underline="false" @click="handleTools('cardviewer')" data-l10n-id="zotcard-card-manager-toolbar-cardviewer-title">
								<img src="chrome://zotcard/content/images/card-viewer.png" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
							</el-link>
						</template>
						<el-space size="large" alignment="center" direction="vertical" style="font-size: 12px;">
							<el-space wrap>
								<span data-l10n-id="zotcard-card-manager-show_card_viewer-in_the">在1</span>
								<span data-l10n-id="zotcard-card-manager">卡片管理器1</span>
								<span v-if="filters.mode === ZotCardConsts.modeProps.all" data-l10n-id="zotcard-card-manager-toolbar-all">所有</span>
								<span v-if="filters.mode === ZotCardConsts.modeProps.only_show" data-l10n-id="zotcard-card-manager-toolbar-onlyshow">仅显示1</span>
								<span v-if="filters.mode === ZotCardConsts.modeProps.only_hide" data-l10n-id="zotcard-card-manager-toolbar-onlyhide">仅隐藏1</span>
								<span v-if="filters.mode === ZotCardConsts.modeProps.only_expand" data-l10n-id="zotcard-card-manager-toolbar-onlyexpand">仅展开1</span>
								<span v-if="filters.mode === ZotCardConsts.modeProps.only_collapse" data-l10n-id="zotcard-card-manager-toolbar-onlycollapse">仅收起1</span>
								<span v-if="filters.mode === ZotCardConsts.modeProps.only_selected" data-l10n-id="zotcard-card-manager-toolbar-onlyselected">仅选择1</span>
								<span data-l10n-id="zotcard-card-manager-show_card_viewer-in_the2">中1</span>
								<el-select v-model="renders.cardViewerPopover.selected" @change="handleCardViewerPopoverChagne" style="width: 90px;">
									<el-option value="all" :label="l10n('zotcard-card-manager-show_card_viewer-all')"></el-option>
									<el-option value="random" :label="l10n('zotcard-card-manager-show_card_viewer-random')"></el-option>
									<el-option value="selectbefore" :label="l10n('zotcard-card-manager-show_card_viewer-selectbefore')"></el-option>
									<el-option value="selectafter" :label="l10n('zotcard-card-manager-show_card_viewer-selectafter')"></el-option>
								</el-select>
								<el-input-number :disabled="renders.cardViewerPopover.selected === 'all'" v-model="renders.cardViewerPopover.total" :min="Math.min(cards.length, 1)" :max="cards.length" style="width: 80px;"></el-input-number>
								<span data-l10n-id="zotcard-card-manager-show_card_viewer-in_the_card">张卡片。1</span>
							</el-space>
							<el-space>
								<el-button @click="handleCancelCardViewer"><span data-l10n-id="zotcard-card-manager-show_card_viewer-cancel">取消1</span></el-button>
								<el-button @click="handleCardViewer" type="success" plain :disabled="renders.cardViewerPopover.total <= 0"><span data-l10n-id="zotcard-card-manager-show_card_viewer-open">立即读卡1</span></el-button>
							</el-space>
						</el-space>
					</el-popover>
					<el-divider direction="vertical"></el-divider>
					<el-link :underline="false" @click="handleTools('zotero')" data-l10n-id="zotcard-card-manager-toolbar-zotero-title">
						<img src="chrome://zotero/skin/z.svg" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
					</el-link>
					<el-link :underline="false" @click="handleTools('window')" icon="CopyDocument" data-l10n-id="zotcard-card-manager-toolbar-window-title">
					</el-link>
				</el-space>
				<el-space>
					<el-radio-group v-model="filters.mode" size="small" @change="handleModeChange" :disabled="total === 0">
						<el-radio-button :label="ZotCardConsts.modeProps.all"><span data-l10n-id="zotcard-card-manager-toolbar-all">所有</span></el-radio-button>
						<el-radio-button :label="ZotCardConsts.modeProps.only_show"><span data-l10n-id="zotcard-card-manager-toolbar-onlyshow">仅显示1</span></el-radio-button>
						<el-radio-button :label="ZotCardConsts.modeProps.only_hide"><span data-l10n-id="zotcard-card-manager-toolbar-onlyhide">仅隐藏1</span></el-radio-button>
						<el-radio-button :label="ZotCardConsts.modeProps.only_expand"><span data-l10n-id="zotcard-card-manager-toolbar-onlyexpand">仅展开1</span></el-radio-button>
						<el-radio-button :label="ZotCardConsts.modeProps.only_collapse"><span data-l10n-id="zotcard-card-manager-toolbar-onlycollapse">仅收起1</span></el-radio-button>
						<el-radio-button :label="ZotCardConsts.modeProps.only_selected"><span data-l10n-id="zotcard-card-manager-toolbar-onlyselected">仅选择1</span></el-radio-button>
					</el-radio-group>
				</el-space>
				<el-space class="el-link-text">
					<el-link :disabled="moreLoadeds < total || total === 0" v-for="f in ['date', 'dateAdded', 'dateModified', 'title']" :underline="false" @click="handleOrderby(f)" :type="filters.orderby === f ? 'primary' : ''">
						<el-icon>
							<D-Caret v-if="filters.orderby !== f"></D-Caret>
							<Caret-Bottom v-else-if="renders.isOrderbyDesc(f)"></Caret-Bottom>
							<Caret-Top v-else></Caret-Top>
						</el-icon> <span :data-l10n-id="`zotcard-card-manager-${f}`">{{ f }}</span>
					</el-link>
					<el-link v-if="profiles.parseWords" :disabled="moreLoadeds < total || total === 0" v-for="f in ['words', 'lines', 'sizes']" :underline="false" @click="handleOrderby(f)" :type="filters.orderby === f ? 'primary' : ''">
						<el-icon>
							<D-Caret v-if="filters.orderby !== f"></D-Caret>
							<Caret-Bottom v-else-if="renders.isOrderbyDesc(f)"></Caret-Bottom>
							<Caret-Top v-else></Caret-Top>
						</el-icon> <span :data-l10n-id="`zotcard-card-manager-${f}`">{{ f }}</span>
					</el-link>
				</el-space>
			</div>
		</el-affix>
		<el-progress v-if="moreLoadeds < total" :percentage="moreLoadeds * 100.0 / total" :show-text="false" :stroke-width="2"></el-progress>

		<!-- cards -->
		<div v-if="cards.length > 0">
			<el-space v-infinite-scroll="loadMore" :infinite-scroll-disabled="scroll.disabled" class="main" wrap direction="horizontal"  alignment="flex-start" :prefix-cls="'card' + profiles.columns">
				<el-card v-for="n in loads" :body-style="{ height: (cards[n - 1].isExpand ? profiles.height + 'px' : 0), fontSize: profiles.contentFontSize + 'px' }" :key="cards[n - 1].id" v-loading="!cards[n - 1].noteLoaded" :shadow="cards[n - 1].isShow ? 'always' : 'never'" :class="(cards[n - 1].isSelected ? 'is-selected' : '') + ' ' + (!cards[n - 1].isShow ? 'is-hide' : '')">
					<template #header>
						<div class="card-header">
							<h1 class="title fill single-line" :style="{ fontSize: profiles.titleFontSize + 'px' }" @click="handleTitle(cards[n - 1])" :title="cards[n - 1].note.title"><zot-text :text="cards[n - 1].note.title"></zot-text></h1>
							<el-space>
								<el-link :type="cards[n - 1].isShow ? 'success' : 'info'" :icon="cards[n - 1].isShow ? 'View' : 'Hide'" :underline="false" @click="handleCardTools('show', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-showorhide-title"></el-link>
								<el-link :type="cards[n - 1].isSelected ? 'success' : 'info'" :icon="cards[n - 1].isSelected ? 'CircleCheckFilled' : 'CircleCheck'" :underline="false" @click="handleCardTools('selected', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-selectedorunselected-title"></el-link>
							</el-space>
						</div>
					</template>
					<el-carousel style="height: 100%;" v-if="cards[n - 1].isExpand" :autoplay="false" :loop="false" :pause-on-hover="false"
						@change="(idx) => handleCarouselChange(idx, cards[n - 1])">
						<!-- card content -->
						<el-carousel-item>
							<div class="card-tools">
								<el-space wrap alignment="center">
									<el-dropdown>
										<el-icon><Edit-Pen /></el-icon>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item @click="handleCardTools('edit-editInWindow', cards[n - 1])"><span data-l10n-id="zotcard-editInWindow">在独立窗口编辑1</span></el-dropdown-item>
												<el-dropdown-item @click="handleCardTools('edit-cardEditor', cards[n - 1])"><span data-l10n-id="zotero-zotcard-card-editor-title">源代码编辑</span></el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
									<el-link :underline="false"
										@click="handleCardTools('delete', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-delete-title"><el-icon>
											<Delete />
										</el-icon></el-link>
									<el-dropdown>
										<el-icon><Document-Copy /></el-icon>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item @click="handleCardTools('copy-content', cards[n - 1])"><span data-l10n-id="zotcard-card-manager-toolbar-copy-content">复制内容1</span></el-dropdown-item>
												<el-dropdown-item @click="handleCardTools('copy-text', cards[n - 1])"><span data-l10n-id="zotcard-card-manager-toolbar-copy-text">复制文本1</span></el-dropdown-item>
												<el-dropdown-item @click="handleCardTools('copy-markdown', cards[n - 1])"><span data-l10n-id="zotcard-card-manager-toolbar-copy-markdown">复制Markdown1</span></el-dropdown-item>
												<el-dropdown-item @click="handleCardTools('copy-html', cards[n - 1])"><span data-l10n-id="zotcard-card-manager-toolbar-copy-html">复制源代码1</span></el-dropdown-item>
												<el-dropdown-item @click="handleCardTools('copy-link', cards[n - 1])" divided><span data-l10n-id="zotcard-card-manager-toolbar-copy-link">复制链接1</span></el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
									<!-- <el-divider direction="vertical"></el-divider>
									<el-link :underline="false" @click="handleCardTools('top', cards[n - 1])">
										<el-icon>
											<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path
													d="M2.5 2H13.5C13.646 2 13.7658 2.04683 13.8595 2.1405C13.9532 2.23417 14 2.354 14 2.5C14 2.646 13.9532 2.76583 13.8595 2.8595C13.7658 2.95317 13.646 3 13.5 3H2.5C2.354 3 2.23417 2.95317 2.1405 2.8595C2.04683 2.76583 2 2.646 2 2.5C2 2.354 2.04683 2.23417 2.1405 2.1405C2.23417 2.04683 2.354 2 2.5 2ZM8.5 6.969V14.0005H7.5V6.86L3.703 10.657L3 9.954L7.953 5.001L12.906 9.954L12.187 10.657L8.5 6.969Z"
													fill="#303133" />
											</svg>
										</el-icon>
									</el-link>
									<el-link :underline="false" @click="handleCardTools('up', cards[n - 1])"><el-icon>
											<Top></Top>
										</el-icon></el-link>
									<el-link :underline="false" @click="handleCardTools('down', cards[n - 1])"><el-icon>
											<Bottom></Bottom>
										</el-icon></el-link>
									<el-link :underline="false"
										@click="handleCardTools('bottom', cards[n - 1])"><el-icon>
											<Download></Download>
										</el-icon></el-link> -->
									<el-divider direction="vertical"></el-divider>
									<el-link :underline="false"
										@click="handleCardTools('print', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-print-title"><el-icon>
											<Printer></Printer>
										</el-icon></el-link>
									<el-divider direction="vertical"></el-divider>
									<el-link :underline="false"
										@click="handleCardTools('collapse', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-collapse-title"><el-icon><Caret-Top></Caret-Top></el-icon></el-link>
									<el-divider direction="vertical"></el-divider>
									<!-- <el-link :underline="false"><el-icon><img src="chrome://zotcard/content/images/zotero32.png" style="object-fit: fill;"><img></el-icon></el-link> -->
									<el-link :underline="false" @click="handleCardTools('zotero', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-zotero-title">
										<img src="chrome://zotero/skin/z.svg" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
									</el-link>
								</el-space>
							</div>
							<el-scrollbar>
								<div v-html="cards[n - 1].note.displayContentHtml()"></div>
							</el-scrollbar>
						</el-carousel-item>
						<!-- card info -->
						<el-carousel-item>
							<el-scrollbar class="card-info" v-loading="!cards[n - 1].moreLoaded">
								<template v-if="cards[n - 1].moreLoaded">
									<div class="row">
										<span class="label" data-l10n-id="zotcard-card-manager-collections">卡片所属1</span>
										<span class="value">
											<el-link :underline="false" v-if="!!cards[n - 1].more.parentItem" @click="handleLink(ZotCardConsts.cardManagerType.item, cards[n - 1].more.parentItem.id)">
												<img :src="`chrome://zotero/skin/item-type/16/light/${cards[n - 1].more.parentItem.itemType.replace(/([A-Z])/g, '-$1').toLowerCase()}@2x.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
												<span>{{ cards[n - 1].more.parentItem.title }}</span>
											</el-link>
											<el-space v-else-if="cards[n - 1].more.collections.length > 0">
												<div v-for="c in cards[n - 1].more.collections" :key="c.id">
													<el-link :underline="false" @click="handleLink(ZotCardConsts.cardManagerType.collection, c.id)">
														<img :src="c.treeViewImage" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
														<span>{{ c.title }}</span>
													</el-link>
												</div>
											</el-space>
											<zot-text v-else></zot-text>
										</span>
									</div>
									<div class="row">
										<span class="label" data-l10n-id="zotcard-card-manager-relations">卡片相关1</span>
										<span class="value">
											<el-space v-if="cards[n - 1].more.relations.length > 0">
												<div v-for="r in cards[n - 1].more.relations" :key="r.id">
													<el-link :underline="false" @click="handleLink(ZotCardConsts.cardManagerType.item, r.id)">
														<img :src="`chrome://zotero/skin/item-type/16/light/${r.itemType.replace(/([A-Z])/g, '-$1').toLowerCase()}@2x.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
														<span>{{ r.title }}</span>
													</el-link>
												</div>
											</el-space>
											<zot-text v-else></zot-text>
										</span>
									</div>
									<div class="row" v-if="profiles.parseCardType">
										<span class="label" data-l10n-id="zotcard-card-manager-cardtype">卡片类型1</span><span class="value el-link-text"><zot-text :text="cards[n - 1].more.cardtype"></zot-text></span>
									</div>
									<div class="row">
										<span class="label" data-l10n-id="zotcard-card-manager-tags">卡片标签1</span><span class="value el-link-text">
											<el-space v-if="cards[n - 1].more.tags.length > 0">
												<div v-for="t in cards[n - 1].more.tags" :key="t.tag">
													<img v-if="t.type === ZotCardConsts.tagType.zotero" :src="`chrome://zotero/skin/16/universal/tag.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
													<span :style="{color: t.color}">{{ t.tag }}</span>
												</div>
											</el-space>
											<zot-text v-else></zot-text>
										</span>
									</div>
									<div class="row">
										<span class="label">
											<span data-l10n-id="zotcard-card-manager-date">卡片日期1</span>
										</span>
										<span class="value el-link-text"><zot-text :text="cards[n - 1].more.date"></zot-text></span>
									</div>
									<div class="row">
										<span class="label" data-l10n-id="zotcard-card-manager-dateAdded">创建时间1</span><span class="value el-link-text"><zot-text :text="cards[n - 1].note.dateAdded"></zot-text></span>
									</div>
									<div class="row">
										<span class="label" data-l10n-id="zotcard-card-manager-dateModified">修改时间1</span><span class="value el-link-text"><zot-text :text="cards[n - 1].note.dateModified"></zot-text></span>
									</div>
									<div class="row" v-if="profiles.parseWords">
										<span class="label" data-l10n-id="zotcard-card-manager-words">卡片字数1</span><span class="value el-link-text" :title="cards[n - 1].more.statistics.title">
											{{ cards[n - 1].more.statistics.text }}
										</span>
									</div>
									<div class="row" v-if="profiles.parseWords">
										<span class="label" data-l10n-id="zotcard-card-manager-lines">卡片行数1</span><span class="value el-link-text">{{ cards[n - 1].more.statistics.lines }}</span>
									</div>
									<div class="row" v-if="profiles.parseWords">
										<span class="label" data-l10n-id="zotcard-card-manager-sizes">卡片占空间1</span><span class="value el-link-text">{{ cards[n - 1].more.statistics.space }}</span>
									</div>
									<div class="row">
										<span class="label"></span><span class="value el-link-text"></span>
									</div>
								</template>
							</el-scrollbar>
						</el-carousel-item>
					</el-carousel>
					<!-- <div class="card-footer"></div> -->
				</el-card>
			</el-space>

			<div v-if="scroll.disabled" class="fill hcenter text-color-placeholder more">{{l10n('zotcard-card-manager-nomore', {total, filter: cards.length})}}</div>
			<div v-if="scroll.loading" class="fill hcenter text-color-placeholder more" data-l10n-id="zotcard-card-manager-loading">Loading</div>
		</div>
		<el-empty v-else>
			<template #description>
				<span class="nodata" v-if="filters.parentIDs.length > 0">{{l10n('zotcard-card-manager-nofilterdata', {total})}}</span>
				<span class="nodata" v-else>
					<span data-l10n-id="zotcard-card-manager-nodata">请在这里选择文献库：1</span>
					<el-badge is-dot class="item">
						<el-link :underline="false" @click="handleTools('menu')" data-l10n-id="zotcard-card-manager-toolbar-menu-title">
							<el-icon><Expand></Expand></el-icon>
						</el-link>
					</el-badge>
				</span>
			</template>
		</el-empty>

		<!-- menu -->
		<el-drawer v-model="renders.drawer" direction="ltr" :size="400" :with-header="false">
			<template #header>
			<h4>卡片管理器</h4>
			</template>
			<template #default>
				<div>
					<el-tabs>
						<el-tab-pane class="filter">
							<template #label>
								<span data-l10n-id="zotcard-card-manager-filter">筛选1</span>
							</template>
							<el-form label-width="100px">
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-filter-library">文献库1</label>
									</template>
									<el-cascader class="fill" v-model="filters.parentIDs" @change="handleParentIDsCascaderChange" :props="renders.parentIDsItemProps" collapse-tags collapse-tags-tooltip tag-type="success" :show-all-levels="false" popper-class="cascader-popper">
										<template #default="{ node, data }">
											<el-space>
												<img :src="data.extras.treeViewImage" onerror="this.src='../images/zotero32.png'" class="el-icon"></img>
												<span>{{ data.label }}</span>
											</el-space>
										</template>
									</el-cascader>
								</el-form-item>
								<el-form-item>
									<div class="fill text-color-placeholder">
										<span data-l10n-id="zotcard-card-manager-filter-total">总卡片数1</span><span>{{ total }}</span>
									</div>
								</el-form-item>
								<el-divider></el-divider>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-filter-match">匹配条件1</label>
									</template>
									<el-radio-group v-model="filters.match" @change="handleFilterChange('match')">
										<el-radio-button :label="ZotCardConsts.matchProps.all"><span data-l10n-id="zotcard-card-manager-filter-match_all">所有1</span></el-radio-button>
										<el-radio-button :label="ZotCardConsts.matchProps.any"><span data-l10n-id="zotcard-card-manager-filter-match_any">任何1</span></el-radio-button>
									  </el-radio-group>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-date">卡片日期1</label>
									</template>
									<el-date-picker
										v-model="filters.dates"
										type="daterange"
										:shortcuts="renders.date_picker_shortcuts"
										value-format="YYYY-MM-DD"
										:disabled="moreLoadeds < total"
										@change="handleFilterChange('date')"
									></el-date-picker>
								</el-form-item>
								<el-form-item v-if="profiles.parseCardType">
									<template #label>
										<label data-l10n-id="zotcard-card-manager-cardtype">卡片类型1</label>
									</template>
									<el-select v-model="filters.cardtypes" multiple class="fill" @change="handleFilterChange('cardtypes')" :disabled="moreLoadeds < total">
										<el-option
										  v-for="item in renders.options.cardtypes"
										  :key="item"
										  :label="item"
										  :value="item"
										>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-tags">卡片标签1</label>
									</template>
									<el-select v-model="filters.tags" multiple collapse-tags class="fill" @change="handleFilterChange('tags')" :disabled="moreLoadeds < total">
										<el-option
										  v-for="item in renders.options.tags"
										  :key="item.type + '-' + item.tag"
										  :label="item.tag"
										  :value="item.type + '-' + item.tag">
											<img v-if="item.type === ZotCardConsts.tagType.zotero" :src="`chrome://zotero/skin/16/universal/tag.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
											<span :style="{color: item.color}">{{ item.tag }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-tags">卡片标签1</label>
									</template>
									<el-select v-model="filters.tags1" multiple collapse-tags class="fill" @change="handleFilterChange('tags1')" :disabled="moreLoadeds < total">
										<el-option
										  v-for="item in renders.options.tags"
										  :key="item.type + '-' + item.tag"
										  :label="item.tag"
										  :value="item.type + '-' + item.tag">
											<img v-if="item.type === ZotCardConsts.tagType.zotero" :src="`chrome://zotero/skin/16/universal/tag.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
											<span :style="{color: item.color}">{{ item.tag }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-tags">卡片标签1</label>
									</template>
									<el-select v-model="filters.tags2" multiple collapse-tags class="fill" @change="handleFilterChange('tags2')" :disabled="moreLoadeds < total">
										<el-option
										  v-for="item in renders.options.tags"
										  :key="item.type + '-' + item.tag"
										  :label="item.tag"
										  :value="item.type + '-' + item.tag">
											<img v-if="item.type === ZotCardConsts.tagType.zotero" :src="`chrome://zotero/skin/16/universal/tag.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
											<span :style="{color: item.color}">{{ item.tag }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-tags">卡片标签1</label>
									</template>
									<el-select v-model="filters.tags3" multiple collapse-tags class="fill" @change="handleFilterChange('tags3')" :disabled="moreLoadeds < total">
										<el-option
										  v-for="item in renders.options.tags"
										  :key="item.type + '-' + item.tag"
										  :label="item.tag"
										  :value="item.type + '-' + item.tag">
											<img v-if="item.type === ZotCardConsts.tagType.zotero" :src="`chrome://zotero/skin/16/universal/tag.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
											<span :style="{color: item.color}">{{ item.tag }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-tags">卡片标签1</label>
									</template>
									<el-select v-model="filters.tags4" multiple collapse-tags class="fill" @change="handleFilterChange('tags4')" :disabled="moreLoadeds < total">
										<el-option
										  v-for="item in renders.options.tags"
										  :key="item.type + '-' + item.tag"
										  :label="item.tag"
										  :value="item.type + '-' + item.tag">
											<img v-if="item.type === ZotCardConsts.tagType.zotero" :src="`chrome://zotero/skin/16/universal/tag.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
											<span :style="{color: item.color}">{{ item.tag }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-title">卡片标题1</label>
									</template>
									<el-input v-model="filters.title" @input="handleFilterInput('title')" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-content">卡片内容1</label>
									</template>
									<el-input v-model="filters.content" @input="handleFilterInput('content')" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<div class="fill text-color-placeholder">
										<span data-l10n-id="zotcard-card-manager-filter-current">筛选卡片数1</span><span>{{ cards.length }}</span>
									</div>
								</el-form-item>
								<el-divider></el-divider>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-filter-saveas">以上条件保存为1</label>
									</template>
									<el-input v-model="saveFilter.label" clearable>
										<template #append>
											<el-button @click="handleSaveFilter" type="success" :disabled="!saveFilter.label"><el-icon><Check /></el-icon></el-button>
										</template>
									</el-input>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-filter-saves">已保存条件1</label>
									</template>
									<el-space class="fill">
										<el-select v-model="saveFilter.selectedLabel" class="fill" @change="handleSaveFilterChange">
											<el-option v-for="s in renders.saveFilters" :value="s.label" :key="s.time" :label="s.label"></el-option>
										</el-select>
										<el-button @click="handleDeleteFilter" :disabled="!saveFilter.selectedLabel"><span data-l10n-id="zotcard-card-manager-filter-saves-delete">删除1</span></el-button>
										<el-button @click="handleLoadSaveFilter" :disabled="!saveFilter.selectedLabel"><span data-l10n-id="zotcard-card-manager-filter-saves-load">加载1</span></el-button>
									</el-space>
									<div class="text-color-placeholder" v-if="saveFilter.selectedTime"><span data-l10n-id="zotcard-card-manager-filter-saves-time">保存于1</span><span>{{ saveFilter.selectedTime }}</span></div>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane>
							<template #label>
								<span data-l10n-id="zotcard-card-manager-ui">界面1</span>
							</template>
							<el-form label-width="100px">
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-ui-title_fontsize">标题字体1</label>
									</template>
								  	<el-input-number class="fill" v-model="profiles.titleFontSize" :min="5" :max="20" @input="handleUIChange('titleFontSize')"></el-input-number>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-ui-centent_fontsize">内容字体1</label>
									</template>
								  	<el-input-number class="fill" v-model="profiles.contentFontSize" :min="5" :max="20" @input="handleUIChange('contentFontSize')"></el-input-number>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-ui-columns">一行列数1</label>
									</template>
								  	<el-input-number class="fill" v-model="profiles.columns" :min="1" :max="10" @input="handleUIChange('columns')"></el-input-number>
								</el-form-item>
								<el-form-item>
									<template #label>
										<label data-l10n-id="zotcard-card-manager-ui-height">卡片高度1</label>
									</template>
								  	<el-input-number class="fill" v-model="profiles.height" :step="50" :min="100" :max="800" @input="handleUIChange('height')"></el-input-number>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane>
							<template #label>
								<span data-l10n-id="zotcard-card-manager-setting">配置1</span>
							</template>
							<el-space direction="vertical" fill style="flex-direction: unset;">
								<el-alert class="fill" type="warning" :closable="false"><template #title><span data-l10n-id="zotcard-card-manager-setting-message">以下配置全局有效</span></template></el-alert>
								<el-form label-width="100px">
									<el-divider content-position="left"><span data-l10n-id="zotcard-card-manager-setting-parse">解析1</span></el-divider>
									<el-form-item>
										<template #label>
											<label data-l10n-id="zotcard-card-manager-setting-parse_date">卡片日期1</label>
										</template>
										<el-switch class="fill" v-model="profiles.parseDate" @input="handleParseChange('parseDate')"></el-switch>
										<span class="text-color-placeholder" data-l10n-id="zotcard-card-manager-setting-parse_date_message">设置之后...</span>
									</el-form-item>
									<el-form-item>
										<template #label>
											<label data-l10n-id="zotcard-card-manager-setting-parse_tags">卡片标签1</label>
										</template>
										<el-switch class="fill" v-model="profiles.parseTags" @input="handleParseChange('parseTags')"></el-switch>
										<span class="text-color-placeholder" data-l10n-id="zotcard-card-manager-setting-parse_tags_message">设置之后...</span>
									</el-form-item>
									<el-form-item>
										<template #label>
											<label data-l10n-id="zotcard-card-manager-setting-parse_cardtype">卡片类型1</label>
										</template>
										<el-switch class="fill" v-model="profiles.parseCardType" @input="handleParseChange('parseCardType')"></el-switch>
										<span class="text-color-placeholder" data-l10n-id="zotcard-card-manager-setting-parse_cardtype_message">设置之后...</span>
									</el-form-item>
									<el-form-item>
										<template #label>
											<label data-l10n-id="zotcard-card-manager-setting-parse_words">卡片字数1</label>
										</template>
										<el-switch class="fill" v-model="profiles.parseWords" @input="handleParseChange('parseWords')"></el-switch>
										<span class="text-color-placeholder" data-l10n-id="zotcard-card-manager-setting-parse_words_message">设置之后...</span>
									</el-form-item>

									<el-divider content-position="left"><span data-l10n-id="zotcard-card-manager-setting-exclude">排除1</span></el-divider>
									<el-form-item>
										<template #label>
											<label data-l10n-id="zotcard-card-manager-setting-exclude_title">卡片标题1</label>
										</template>
										<el-input class="fill" v-model="profiles.excludeTitle" :rows="5" type="textarea" @input="handleExcludeInput('excludeTitle')"></el-input>
										<span class="text-color-placeholder" data-l10n-id="zotcard-card-manager-setting-exclude_title_message">设置之后...</span>
									</el-form-item>
									<el-form-item>
										<template #label>
											<label data-l10n-id="zotcard-card-manager-setting-exclude_collectionoritem">排除条目1</label>
										</template>
										<el-cascader class="fill" v-model="profiles.excludeCollectionOrItemKeys" :props="renders.excludeCollectionOrItemKeysItemProps" @change="handleExcludeChange('excludeCollectionOrItemKeys')" :show-all-levels="false">
											<template #default="{ node, data }">
												<el-space>
													<img :src="data.extras.treeViewImage" onerror="this.src='../images/zotero32.png'" class="el-icon"></img>
													<span>{{ data.label }}</span>
												</el-space>
											</template>
										</el-cascader>
										<span class="text-color-placeholder" data-l10n-id="zotcard-card-manager-setting-exclude_collectionoritem_message">设置之后...</span>
									</el-form-item>
								</el-form>
							</el-space>
						</el-tab-pane>
						<el-tab-pane>
							<template #label>
								<span data-l10n-id="zotcard-card-manager-help">帮助1</span>
							</template>
							<span class="help" data-l10n-id="zotcard-card-manager-help-message">...</span>
						</el-tab-pane>
					</el-tabs>
				</div>
			</template>
		</el-drawer>

		<el-backtop :right="50" :bottom="50"></el-backtop>
	</div>
</body>
</html>